<template>
  <div v-loading="loading">
    <GoBack />
    <ARow class="enter-x">
      <ACol :span="24">
        <Card class="card-brief">
          <div :class="`${prefixCls}-header`">
            <div class="info">
              <div :class="`${prefixCls}-header-img`">
                <img :src="record.logo || defaultLogo" width="70px" height="70px"/>
              </div>
              <Description style="width: 100%" @register="register" />
            </div>
            <div>
              <a-button class="mr-3 mb-2" v-if="record.mainAppId != record.id" @click="handleConfigManage">配置管理端</a-button>
              <a-button type="primary" class="mr-3 mb-2" @click="handleJumpApp">进入应用</a-button>
            </div>
          </div>
        </Card>
      </ACol>

      <ACol :span="24">
        <Card class="mt-2 card-brief" >
          <div :class="`${prefixCls}-account-detail`">
            <Tabs v-model:activeKey="activeKey" :tabBarGutter="25" @change="handleChange" :tabBarStyle="tabBarStyle" animated>
              <TabPane v-for="item in getTabList" :tab="item.name" :key="item.type">
                <ARow ARow class="enter-x">
                   <ACol :sm="24" :md="24" :lg="24" :xl="16" style="margin: auto">
                      <component :is="item.component" :type="item.type" :data="record" @success="handleSubmit" />
                   </ACol>
                </ARow>
              </TabPane>
            </Tabs>
          </div>
        </Card>
      </ACol>
    </ARow>
  </div>
</template>
<script lang="ts" setup>
  import { Card, Col, Row } from "ant-design-vue"
  import { ref, computed, unref, CSSProperties, onMounted } from "vue"
  import { Space, Upload, Avatar, Tabs, TabPane } from "ant-design-vue"
  import { Description, DescItem, useDescription } from "/@/components/Description/index"
  import { useDesign } from "/@/hooks/web/useDesign"
  import { useRoute, useRouter } from "vue-router"
  import GoBack from '/@/components/GoBack'
  import * as appApi from "/@/api/iam/app"
  import * as utils from "/@/utils"
  import Copy from "/@/components/My/Copy.vue"
  import * as iamCache from "/@/utils/cache/module/iam"
  import { baseInfoDescSchema, TAB_TYPE } from "./data"
  import AppConfig from "./components/AppConfig.vue"
  import ProtocolConfig from "./components/ProtocolConfig.vue"
  import SecretConfig from "./components/SecretConfig.vue"
  import AccessAuthorization from "./components/AccessAuthorization.vue"
  import LoginConfig from "./components/LoginConfig.vue"
  import defaultLogo from "/@/assets/images/default-app.png"
  import qs from "qs"
  import { useMessage } from "/@/hooks/web/useMessage"
  const { createMessage, createConfirm } = useMessage()

  const router = useRouter()
  let id = router.currentRoute.value.params?.id
  let reqActionTab = router.currentRoute.value.query?.actionTab
  console.log("currentRoute.params: " + id, reqActionTab)

  const { prefixCls } = useDesign("app-detail")
  const ACol = Col
  const ARow = Row
  const activeKey = ref(TAB_TYPE.BASE_CONFIG)
  const record = ref<any>({})
  const userId = ref<any>(id)
  const loading = ref(false)
  const updatePathParams = () => {
    const query = {
      ...router.currentRoute.value.query,
      actionTab: activeKey.value
    }
    window.history.replaceState({}, '', `?${qs.stringify(query)}`)
  }

  if (!reqActionTab) {
    activeKey.value = TAB_TYPE.BASE_CONFIG
  } else {
    activeKey.value = reqActionTab as string
  }

  const tabBarStyle = ref<CSSProperties>({
    marginTop: '-15px'
  })

  const [register] = useDescription({
    bordered: false,
    data: record,
    schema: baseInfoDescSchema,
  })

  const handleChange = (key: string) => {
    activeKey.value = key
    updatePathParams()

  }

  const handleSubmit = (data = {}) => {
    record.value = { ...record.value, ...data }
  }

  const handleJumpApp = () => {
    let homePageUrl = record.value.homePageUrl
    if (!homePageUrl) {
      createMessage.error('请先配置应用首页地址')
      return
    }
    homePageUrl = utils.setObjToUrlParams(homePageUrl, {
      tenantId: iamCache.getTenantId(),
      appId: record.value.id
    })
    window.open(homePageUrl, "_blank")
  }

  const handleConfigManage = () => {
    router.push(`/console/myApp/edit/${record.value.mainAppId}`)
  }

  onMounted(async () => {
    try {
      loading.value = true
      record.value = await appApi.getApp({ id })
    } finally {
      loading.value = false
    }
  })

  const allTabList = [
    {
      type: TAB_TYPE.BASE_CONFIG,
      name: "应用配置",
      component: AppConfig,
    },
    {
      type: TAB_TYPE.PROTOCOL_CONFIG,
      name: "协议配置",
      component: ProtocolConfig,
    },
    {
      type: TAB_TYPE.SECRET_CONFIG,
      name: "密钥配置",
      component: SecretConfig,
    },
    {
      type: TAB_TYPE.LOGIN_CONTROLL,
      name: "登录配置",
      component: LoginConfig,
    },
    {
      type: TAB_TYPE.ACCESS_AUTHORIZATION,
      name: "访问授权",
      component: AccessAuthorization,
    },
  ]

  const getTabList = computed(() => {
    const { customLoginConfigFlag } = record.value
    let tabs : any = allTabList
    if (!customLoginConfigFlag) {
      tabs = allTabList.filter(e => e.type != TAB_TYPE.PROTOCOL_CONFIG)
    }
    return tabs
  })
</script>

<style lang="less">
  @prefix-cls: ~"@{namespace}-app-detail";

  .@{prefix-cls} {

    &-header .info {
      display: flex;
      width: 80%;
    }

    &-header {
      display: flex;
      width: 100%;
      justify-content: space-between;
    }

    &-header-img {
      margin-right: 15px;
    }
  }
</style>
